<template>
  <el-aside class="structure-tree" width="260px">
    <!-- 使用 el-tree 替换原来的 el-menu 结构 -->
    <el-tree
      :data="treeData"
      :props="defaultProps"
      :current-node-key="currentNodeKey"
      :highlight-current
      @node-click="handleNodeClick"
      node-key="key"
      default-expand-all
    >
      <!-- 自定义节点内容 -->
      <template #default="{ node, data }">
        <span>{{ node.label }}</span>
      </template>
    </el-tree>
  </el-aside>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义 el-tree 的 props 配置
const defaultProps = {
  children: 'children',
  label: 'label',
}

// 原始树形结构数据（保持不变）
const treeData = [
  {
    key: 'project1',
    label: '项目一',
    children: [
      {
        key: 'module1',
        label: '模块一',
        children: [
          { key: 'file1', label: '文件A' },
          { key: 'file2', label: '文件B' },
        ],
      },
      {
        key: 'module2',
        label: '模块二',
        children: [
          { key: 'file3', label: '文件C' },
          { key: 'file4', label: '文件D' },
        ],
      },
    ],
  },
  {
    key: 'project2',
    label: '项目二',
    children: [
      {
        key: 'module3',
        label: '模块三',
        children: [
          { key: 'file5', label: '文件E' },
          { key: 'file6', label: '文件F' },
        ],
      },
    ],
  },
]

// 当前激活节点 key
const currentNodeKey = ref('file1')

// 节点点击回调
const handleNodeClick = (data: any, node: any) => {
  console.log('点击节点:', data)
  if (data.key) {
    currentNodeKey.value = data.key
    // 这里可以触发跳转或更新右侧内容逻辑
  }
}
</script>

<style scoped>
.structure-tree {
  background-color: white;
  border-right: 1px solid #ebeef5;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
}

/* 调整 el-tree 的悬停效果 */
:deep(.el-tree-node__content:hover) {
  background-color: #ecf5ff !important;
}

/* 去掉默认边框 */
:deep(.el-tree) {
  background-color: transparent;
  border: none;
}

/* 自定义节点样式 */
:deep(.el-tree-node__label) {
  font-size: 14px;
  color: #303133;
}

/* 选中节点的样式 */
:deep(.is-current > .el-tree-node__content) {
  background-color: #ecf5ff !important;
  color: #409eff;
}
</style>
